<template>
  <div class="cart-table">
    <div class="cart-group">
      <div class="cart-top-items" v-for="(item,index) in alldata" :key="index">
        <div class="cart-items">
          <div class="items-choose">
            <span class="blue-checkbox-new "
            :class="item.isCheck?'checkbox-on':''" @click="checknum(index)">
              <a></a>
            </span>
          </div>
          <div class="items-thumb">
            <img :src="item.image" />
            <a href="javascript:;" target="_blank"></a>
          </div>
          <div class="name hide-row">
            <div class="name-table">
              <a href="javascript:;" target="_blank">{{item.title}}</a>
              <ul class="attribute">
                <li>{{item.detail.color_name}}</li>
              </ul>
            </div>
          </div>
          <div class="operation">
            <a class="items-delete-btn" @click="deldata(index)"></a>
          </div>
          <div class="subtotal">¥ {{item.price*item.snum}}</div>
          <div class="item-cols-num">
            <div class="select js-select-quantity">
              <span class="down" @click="item.snum>1?item.snum--:''" :class="item.snum<=1?'down-disabled':''">-</span>
              <span class="num">
                <input type="text" style="display: inline-block;" v-model="item.snum"/>
              </span>
              <span class="up" @click="item.snum>=1?item.snum++:''" :class="item.snum<1?'up-disabled':''">+</span>
            </div>
          </div>
          <div class="price">¥ {{item.price}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["alldata"],
   computed: {
    totaldata() {
      return this.$store.getters.alldata;
    }
  },
  methods: {
      checknum(idx){
          this.$store.commit('checknum',idx)
      },
      deldata(idx){
        this.$store.commit('recorddel',idx)
      }
  },
};
</script>

<style>
</style>